iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
2

昨天看完了Router,今天來寫個跟它有密切關係的常見網站功能:「Breadcrumb麵包屑」!
記得Components那篇嗎?重複使用的結構可以寫成Component,在需要時將它引用進來!現在就很適合把Breadcrumb寫成Component,忘記怎麼寫的話可以回頭看一下( https://ithelp.ithome.com.tw/articles/10202766 ),現在我們就開始吧!

Component Breadcrumb範例實做

我直接用<ul><li>寫了一組Breadcrumb要用的結構,接著寫入以下內容:

<template>
    <div class="breadcrumb">
        <ul>
            <li
            v-for="(breadcrumb, idx) in breadcrumbList"
            :key="idx"
            @click="routeTo(idx)"
            :class="{'linked': !!breadcrumb.link}">

            {{ breadcrumb.name }}

            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'Breadcrumb',
        data() {
            return {
                breadcrumbList: []
            }
        },
        mounted () { this.updateList() },
        watch: { '$route' () { this.updateList() } },
        methods: {
        routeTo (pRouteTo) {
            if (this.breadcrumbList[pRouteTo].link) this.$router.push(this.breadcrumbList[pRouteTo].link)
        },
        updateList () { this.breadcrumbList = this.$route.meta.breadcrumb }
        }
    }
</script>

<style scoped>
    .breadcrumb {
        margin-bottom: line(3);
    }
    ul {
        display: flex;
        list-style: none;
        padding: 0;
        font-size: font(1);
    }
    li {
        cursor: pointer;
        color: #42b983;
    }
    li:last-child {
        cursor: default;
    }
    li:not(:last-child):after {
        content: ">";
        margin: 5px;
    }
</style>

Component Breadcrumb範例解說

先從<script>開始看,相信經過前幾天的學習,你可能也猜到會用到v-for陣列了,沒錯!

  • 我先return了breadcrumbList陣列,裡面是空的。
  • mounted ()是vue的「生命週期鉤子」目前不了解沒關系,之後會來特別寫一篇,目前先了解它是vue網站在創建的初始化過程中的一個階段鉤子,「生命週期鉤子」函式能你在指定階段加入自己的程式,而mounted是在「模板掛載完成」的階段。
  • this.updateList()函式加入上述「生命週期鉤子」。
  • watch:可讓我們監看指定值,當這個值變更時,就去做我們指定的事情,接著在通過$router訪問路由實例。
  • methods:執行動作,什麼動做?簡單說它能依據我們router.js裡的routes:內容更新Breadcrumb。
    整體來說就是在mounted時監看route,如有更新就連動更新Breadcrumb內容、連結。

Page範例實做

做完了Component當然就要把它引用進App.vue頁面裡了!為了讓範例清處一點,我另外新增了一頁子頁取名News,並在主選單nav新增頁面連結:就像昨天學的做法一樣,實做如下:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">回首頁</router-link> |
      <router-link to="/news">最新消息</router-link> |
      <router-link to="/about">關於我們</router-link>
    </div>
    <Breadcrumb />
    <router-view/>
  </div>
</template>

<script>
import Breadcrumb from './components/Breadcrumb'

export default {
  name: 'about',
  components: {
    Breadcrumb
  }
}
</script>

<style scoped>
  #nav {
    background: #42b983;
    padding: 20px;
    text-align: center;
    color: white;
  }
  a {
    color: white;
    text-decoration: none;
  }
</style>

Router範例

剩下最後一個步驟了!換到router.js,並寫下:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        breadcrumb: [{
          name: '首頁'
        }]
      }
    },
    {
      path: '/news',
      name: 'news',
      component: () => import('./views/News.vue'),
      meta: {
        breadcrumb: [{
          name: '首頁',
          link: 'home'
        },
        {
          name: '最新消息'
        }]
      }
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue'),
      meta: {
        breadcrumb: [{
          name: '首頁',
          link: 'home'
        },
        {
          name: '關於我'
        }]
      }
    }
  ]
})

Router範例解說

我在routes:陣列中,加入各頁的meta:,裡面設定了breadcrumb,並寫成了一個陣列,該陣列就是breadcrumb一層一層向內的連結選單,以下我做詳細說明:

  • name:是這一頁連結按鈕要在頁面上顯示的名稱文字。
  • link:是點下breadcrumb連結選項時,要連去的頁面,比如說首頁就連去home(也就是routes裡頁面的名子name)。
    剛剛說breadcrumb:陣列就是該頁的breadcrumb層一層向內的選單,那為什麼最後一筆只下name:連結顯示名稱,沒下link:呢?因為最後一筆就是你的當前頁面了,不需要自已連自已。

https://ithelp.ithome.com.tw/upload/images/20181024/20111956Cq3rBkiHGQ.png

目前範例只有兩層而已,也許不是那麼清處,我另外把news頁改寫成三層,會更容易了解喔:

    {
      path: '/news',
      name: 'news',
      component: () => import('./views/News.vue'),
      meta: {
         breadcrumb: [{
           name: '首頁',
           link: 'index'
         },
         {
           name: '範例層test',
           link: 'test'
         },
         {
           name: '關於我'
         }]
      }
    },

這樣就能明白它的做法了吧,實做成功!breadcrumb是不是也不難?


上一篇
Vue[10]-Router
下一篇
Vue[12]-Slots插槽與Layout
系列文
網頁設計靠 Vue.js 轉前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言